<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 100%;
      border: 1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0px;
      text-align: center;
    }

    table td {
      border: 1px solid #ccc;
      height: 30px;
    }
  </style>
</head>

<body>
  <!-- <a href="###" class="remove">删除</a>
  <a href="###" class="clone">复制</a> -->
  <div class="box">
    <h1>的使用创建dom节点动态生成表格</h1>
    <label for="">行：</label>
    <input type="text" id="row">
    <label for="">列：</label>
    <input type="text" id="col">
    <input type="button" id="btn" value="生成">
    <div id="output">
      <!-- <table>
            <tbody>
                <tr>
                    <td>浮动法</td>
                </tr>
            </tbody>
        </table> -->
    </div>
  </div>
  <script>
    let row = document.querySelector("#row") //行
    let col = document.querySelector("#col") //列
    let btn = document.querySelector("#btn"); //生成按钮
    let output = document.querySelector("#output") //外围结构

    //1：为btn添加点击事件
    btn.onclick = function () {

      output.innerHTML = ""
      //2：先获取到行和列的表单值
      let _row = row.value; //行的值
      let _col = col.value; //列的值
      //获取body和table 并且把body添加入table
      let table = document.createElement("table")
      let tbody = document.createElement("tbody")
      table.appendChild(tbody)

      //3：动态生成表格
      for (let i = 0; i < _row; i++) { //控制行 于是在这边生成行
        var tr = document.createElement("tr")
        //需求2：表格的隔行换色 偶数行为灰色
        i % 2 === 0 ? tr.style.background = "#ccc" : ""
        //控制内存的列的循环！
        for (let j = 0; j < _col; j++) {
          var td = document.createElement("td") //动态创建列
          if (j < _col - 1) { //前面的时候就给td添加 ${'单元格' + i+j}
            td.innerHTML = `${'单元格' + i+j} `
          } else { //需求3-1：选择到最后一个td单元格 添加删除和复制按钮！
            td.innerHTML = `           
            <a href="###" class="remove">删除</a>
           <a href="###" class="clone">复制</a> `
          }
          //这是把td添加入tr身上
          tr.appendChild(td)
        }

        //需要在循环 行的时候，把行添加入tbody里面1
        tbody.appendChild(tr)
      }
      //最后把table添加入output
      output.appendChild(table)

      //复制按钮
      var clones = document.querySelectorAll("#output tr>td .clone")
      clones.forEach(function (items, i) {
        clones[i].onclick = function () {
          //点击复制 复制所对应的行 然后添加到tbody之中
          let clo0 = this.parentNode.parentNode.cloneNode(true);
          tbody.appendChild(clo0)
        }
      })

      //需求3-2为删除和复制添加功能
      var removes = document.querySelectorAll("#output tr>td .remove")
      removes.forEach(function (items, i) {
        removes[i].onclick = function () {
          //点击删除 删除所对应的行 也就是删除的父亲td 的父亲tr
          tbody.removeChild(this.parentNode.parentNode)
        }
      })


    }
  </script>
</body>

</html>